<template>
  <div class="g-calendar">
    <div class="g-calendar__header">
      <van-icon name="arrow-left" @click="preMonth" />
      <span class="text-main">{{ month }}</span>
      <van-icon name="arrow" :class="inCurrentMonth && 'van-icon--disabled'" @click="nextMonth" />
    </div>
    <div class="g-calendar__body">
      <div class="g-calendar__week g-calendar__week--header">
        <span v-for="(key, index) in week" :key="index" class="g-calendar__day">{{ key }}</span>
      </div>
      <div class="g-calendar__week">
        <div v-for="item in calendar" :key="item.date" :class="item.class" @click="onDayClick(item)">
          <span :class="['text-day', item.date === selectedDate && 'text-day--selected']">{{ item.day }}</span>
          <span :class="['dot', 'dot--' + item.report]" />
        </div>
      </div>
    </div>
    <div class="g-calendar__footer">
      <span class="legend-item"><i class="dot" />未签到</span>
      <span class="legend-item"><i class="dot dot--1" />已签到</span>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant'
import dayjs from 'dayjs'

const today = dayjs()
export default {
  components: {
    [Icon.name]: Icon
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      date: dayjs(),
      selectedDate: ''
    }
  },
  computed: {
    month() {
      return this.date.format('YYYY年MM月')
    },
    inCurrentMonth() {
      return this.date.isSame(today, 'month')
    },
    calendar() {
      return this.data.map(item => {
        item.class = ['g-calendar__day']
        today.isBefore(item.date, 'day') && item.class.push('g-calendar__day--disabled')
        today.isSame(item.date, 'day') && item.class.push('g-calendar__day--today')
        item.day = dayjs(item.date).format('D')
        return item
      })
    }
  },
  created() {
    this.setMonthRange(this.date)
  },
  methods: {
    setMonthRange(date) {
      const startDate = date.startOf('month').startOf('week').format('YYYY-MM-DD')
      const endDate = date.endOf('month').endOf('week').add(1, 'day').format('YYYY-MM-DD')
      this.$emit('change', {
        startDate,
        endDate
      })
    },
    preMonth() {
      this.date = this.date.startOf('month').subtract(1, 'day')
      this.setMonthRange(this.date)
    },
    nextMonth() {
      this.date = this.date.endOf('month').add(1, 'day')
      this.setMonthRange(this.date)
    },
    onDayClick(item) {
      this.selectedDate = item.date
      this.$emit('click', item)
    }
  }
}
</script>

<style lang="less">
.g-calendar {
  &__header {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    line-height: 52px;
    margin-bottom: 40px;

    .van-icon {
      font-weight: bold;
      line-height: inherit;
      padding: 0 10px;

      &--disabled {
        color: #dddddd;
        pointer-events: none;
      }
    }

    .text-main {
      display: inline-block;
      width: 240px;
      text-align: center;
      font-family: monospace;
    }
  }

  &__week {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &--header {
      color: #999999;

      .g-calendar__day {
        height: 60px;
      }
    }
  }

  &__day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 14.285%;
    height: 100px;

    &--disabled {
      color: #cccccc;
      pointer-events: none;
      .dot {
        visibility: hidden;
      }
    }

    &--today {
      .text-day {
        background-color: rgba(25, 111, 250, .1);
        color: @primary;
      }
    }
  }

  .dot {
    pointer-events: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: red;

    &--1 {
      background-color: @primary;
    }
  }

  .text-day {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;

    &--selected {
      background-color: @primary;
      color: #ffffff;
    }
  }

  &__footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;

    .legend-item {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .dot {
      margin-right: 8px;
    }
  }
}
</style>
